<template>
  <div class="">
    <el-form ref="elForm" label-position="left" :model="formData" :rules="rules" label-width="170px"
      v-loading="loadingForm">
      <div class="header-btn">
        <div>分配规则</div>
        <el-button type="primary" @click="sure">保存</el-button>
      </div>
      <div class="main">
        <div class="biao">
          未归属客户，符合以下规则系统将在每天07:00:00自动分配:
        </div>
        <div class="title">分配配置</div>
        <el-form-item label="是否启用：" prop="isOpen">
          <el-switch v-model="formData.isOpen"></el-switch>
        </el-form-item>

        <el-form-item class="insuranceType" label="分配业务条线：" prop="insuranceType">
          <el-checkbox-group v-model="formData.insuranceType">
            <el-checkbox v-for="item in businessLineOptions" :key="item.dictValue" :label="+item.dictValue"
              name="insuranceType">
              {{ item.dictLabel }}
            </el-checkbox>
          </el-checkbox-group>
        </el-form-item>
        <el-form-item label="分配方式：" prop="distributeWay">
          <el-radio-group v-model="formData.distributeWay" @change="changeWay">
            <el-radio v-for="(item, index) in distributeWayOptions" :key="index" :label="item.value"
              :disabled="item.disabled">
              {{ item.label }}
            </el-radio>
          </el-radio-group>
        </el-form-item>
        <template v-if="formData.distributeWay === 2">
          <el-form-item label="各业务条线每次分配：" prop="insuranceTypeDistribute">
            <el-input v-model="formData.insuranceTypeDistribute"></el-input>
            人
            <div class="remarks">需录入整数</div>
          </el-form-item>
          <el-form-item label="各业务员分配：" prop="sysUserDistribute">
            <el-input v-model="formData.sysUserDistribute"></el-input>
            人
            <span style="margin-left: 10px">注：需录入整数</span>
            <div class="remarks">需录入整数</div>
          </el-form-item>
        </template>
        <div class="title">限制配置</div>
        <el-form-item label="未签单客户上限：" prop="unSignedCus" label-position="right">
          <el-input v-model="formData.unSignedCus"></el-input>
          人
          <el-radio-group v-model="formData.unSignedIsCreateCode">
            <el-radio label="1">包含自拓客户</el-radio>
            <el-radio label="2">不包含自拓客户</el-radio>
          </el-radio-group>
          <div class="remarks">需录入整数</div>
        </el-form-item>
        <el-form-item label="未加好友客户数量上限：" prop="noFriendCus" label-position="right">
          <el-input v-model="formData.noFriendCus"></el-input>
          人
          <el-radio-group v-model="formData.noFriendIsCreateCode">
            <el-radio label="1">包含自拓客户</el-radio>
            <el-radio label="2">不包含自拓客户</el-radio>
          </el-radio-group>
          <div class="remarks">需录入整数</div>
        </el-form-item>
      </div>
    </el-form>
  </div>
</template>
<script>
import { addRule, selectDistributeRule } from "@/api/customer/rules";

export default {
  components: {},
  props: [],
  data() {
    return {
      formData: {
        isOpen: false,
        distributeWay: 1,
        insuranceTypeDistribute: undefined,
        sysUserDistribute: undefined,
        unSignedCus: undefined,
        noFriendCus: undefined,
        unSignedIsCreateCode: "1",
        noFriendIsCreateCode: "1",
        insuranceType: [],
      },
      loadingForm: false,
      rules: {
        insuranceTypeDistribute: [
          { validator: this.validatePass, trigger: "blur" },
        ],
        sysUserDistribute: [
          { validator: this.validatePassPerson, trigger: "blur" },
        ],
        unSignedCus: [{ validator: this.validatePass, trigger: "blur" }],
        noFriendCus: [{ validator: this.validatePass, trigger: "blur" }],
        insuranceType: [
          {
            type: "array",
            required: true,
            message: "请至少选择一个业务条线",
            trigger: "change",
          },
        ],
      },
      businessLineOptions: [
        {
          label: "团险",
          value: 0,
        },
        {
          label: "个险",
          value: 1,
        },
      ],
      distributeWayOptions: [
        {
          label: "按每天客户数均分",
          value: 1,
        },
        {
          label: "按分配数量循环",
          value: 2,
        },
      ],
    };
  },
  computed: {
    userName() {
      return this.$store.state.user.userName;
    },
  },
  watch: {},
  created() {
    // 渠道
    this.getDicts("insurance_type").then((res) => {
      if (res.code === 200) {
        this.businessLineOptions = res.data;
      }
    });
  },
  mounted() {
    this.init();
  },
  methods: {
    init() {
      this.getInfo();
    },
    getInfo() {
      // const params = {
      //   createBy: this.userName,
      // };
      this.loadingForm = true;
      selectDistributeRule()
        .then((res) => {
          if (res.code === 200) {
            if (res.data.length === 0) return;
            let list = res.data[0];
            const distributeRule = JSON.parse(list.distributeRule);
            this.formData = distributeRule;
            this.formData.isOpen = distributeRule.isOpen === 0 ? false : true;
            const lineList = distributeRule.distributeinsuranceType.split(",");
            let arr = [];
            lineList.forEach((item) => {
              arr.push(parseInt(item));
            });
            this.$set(this.formData, "insuranceType", arr);
            console.log(this.formData.insuranceType, "这个是啥");
          }
        })
        .catch(() => {
          console.log("error");
        })
        .finally(() => {
          this.loadingForm = false;
        });
    },
    validatePass(rule, value, callback) {
      // console.log(value);
      if (/\d/.test(value) && value % 1 == 0 && value != 0) {
        callback();
      } else {
        callback(new Error("请录入非零整数"));
      }
    },
    validatePassPerson(rule, value, callback) {
      let flag = Number(value) <= Number(this.formData.insuranceTypeDistribute);
      if (/\d/.test(value) && value % 1 == 0 && value != 0 && flag) {
        callback();
      } else {
        callback(new Error("请录入小于各业务条线分配的非零整数"));
      }
    },
    reset() {
      this.formData = {
        isOpen: false,
        distributeWay: undefined,
        insuranceTypeDistribute: undefined,
        sysUserDistribute: undefined,
        unSignedCus: undefined,
        noFriendCus: undefined,
        unSignedIsCreateCode: 1,
        noFriendIsCreateCode: 1,
        insuranceType: [],
      };
    },
    changeWay() {
      if (this.formData.distributeWay === 1) {
        this.formData.insuranceTypeDistribute = undefined;
        this.formData.sysUserDistribute = undefined;
      }
    },
    sure() {
      console.log("ddd");
      this.$refs["elForm"].validate((valid) => {
        if (!valid) return;
        // TODO 提交问卷
        // console.log(this.formData);
        const params = {
          distributeRule: {
            ...this.formData,
            isOpen: +this.formData.isOpen,
            distributeinsuranceType: this.formData.insuranceType.join(","),
          },
        };
        addRule(params)
          .then((res) => {
            if (res.code === 200) {
              this.$message.success("分配规则保存成功");
              // this.reset();
            }
          })
          .catch(() => { });
      });
    },
  },
};
</script>
<style lang="scss" scoped>
@import "@/styles/base.scss";

.header-btn {
  @include headerBtn;
}

.title {
  padding: 15px 10px;
  font-size: 14px;
  color: rgb(38, 38, 38);
  font-weight: bold;
}

.main {
  background: #fff;
  padding: 20px 20px 30px 20px;

  .el-input {
    width: 10%;
    margin-right: 10px;
  }

  .remarks {
    font-size: 14px;
    color: #082aff;
    line-height: 20px;
    width: 10%;
    text-align: right;
  }

  .el-radio-group {
    margin-left: 20px;
  }
}

.biao {
  // font-size: 16px;
  padding: 20px 10px;
  background: #edf1f2;
  width: 50%;
  border-radius: 20px;
}

.insuranceType {
  ::v-deep .el-form-item__label {
    margin-left: -8px;
  }
}
</style>
